<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link rel="stylesheet" type="text/css" href="css/message.css" />
		<style type="text/css">
			[v-cloak] {
				display: none !important;
			}
		</style>
	</head>

	<body>
		<div class="mui-page" id="refreshContainer">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<a class="mui-left mui-action-back mui-btn-nav">
					<span class="mui-icon mui-icon-left-nav"></span>
				</a>
				<h1 class="mui-center mui-title">我的预约</h1>
				<a href="javascrip:;" id="btnBooking" class="mui-icon mui-icon-plusempty mui-pull-right"></a>
			</div>
			<div class="mui-page-content" id="mui-messagesMsg" style="margin-top: 55px;" v-cloak>
				<ul id="btnBooking_opts" class="mui-table-view mui-table-view-striped mui-table-view-condensed">
					<li v-if="total == 0" class="mui-table-view-cell">
						<div class="mui-table">
							<div class="mui-table-cell mui-col-xs-10">
								<p class="mui-h6 mui-ellipsis" style="text-align: center; font-size: 14px;">暂无预约消息</p>
							</div>
						</div>
					</li>
					<li v-else v-for="(item,index) in items" class="mui-table-view-cell" :data-meetingId="item.id">
						<div v-if="item.status == 1" class="mui-slider-right mui-disabled">
							<a class="mui-btn mui-btn-red">取消会议</a>
						</div>
						<div v-if="item.status == 1" class="mui-slider-handle mui-table">
							<div class="mui-slider-handle mui-table-cell mui-col-xs-9">
								<p class="mui-h5 mui-ellipsis" style="text-indent: 0;">会议:{{item.subject}}</p>
								<h5><span class="mui-badge mui-badge-warning" style="color: #fff;">待审核</span>&nbsp;&nbsp;</h5>
							</div>
							<div class="mui-table-cell mui-col-xs-3 mui-text-right">
								<span class="mui-h5">{{item.beginTime}}</span>
							</div>
						</div>

						<div v-if="item.status == 2" data-id="1" class="mui-slider-right mui-disabled">
							<a class="mui-btn mui-btn-red">取消会议</a>
						</div>
						<div v-if="item.status == 2" class="mui-slider-handle mui-table">
							<div class="mui-slider-handle mui-table-cell mui-col-xs-9">
								<p class="mui-h5 mui-ellipsis" style="text-indent: 0;">会议:{{item.subject}}</p>
								<h5><span class="mui-badge mui-badge-primary" style="color: #fff;">已预约</span>&nbsp;&nbsp;</h5>
							</div>
							<div class="mui-table-cell mui-col-xs-3 mui-text-right">
								<span class="mui-h5">{{item.beginTime}}</span>
							</div>
						</div>
						<div v-if="item.status == 3" class="mui-slider-handle mui-table">
							<div class="mui-slider-handle mui-table-cell mui-col-xs-9">
								<p class="mui-h5 mui-ellipsis" style="text-indent: 0;">会议:{{item.subject}}</p>
								<h5><span class="mui-badge mui-badge-success" style="color: #fff;">直播中</span>&nbsp;&nbsp;</h5>
							</div>
							<div class="mui-table-cell mui-col-xs-3 mui-text-right">
								<span class="mui-h5">{{item.beginTime}}</span>
							</div>
						</div>

						<div v-if="item.status == 4" class="mui-slider-handle mui-table">
							<div class="mui-slider-handle mui-table-cell mui-col-xs-9">
								<p class="mui-h5 mui-ellipsis" style="text-indent: 0;">会议:{{item.subject}}</p>
								<h5><span class="mui-badge" style="color: #fff;">已结束</span>&nbsp;&nbsp;</h5>
							</div>
							<div class="mui-table-cell mui-col-xs-3 mui-text-right">
								<span class="mui-h5">{{item.beginTime}}</span>
							</div>
						</div>

						<div v-if="item.status == 5" class="mui-slider-handle mui-table">
							<div class="mui-slider-handle mui-table-cell mui-col-xs-9">
								<p class="mui-h5 mui-ellipsis" style="text-indent: 0;">会议:{{item.subject}}</p>
								<h5><span class="mui-badge mui-badge-danger" style="color: #fff;">已取消</span>&nbsp;&nbsp;</h5>
							</div>
							<div class="mui-table-cell mui-col-xs-3 mui-text-right">
								<span class="mui-h5">{{item.beginTime}}</span>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</body>

</html>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/server.js"></script>
<script type="text/javascript">
	var offset = 0;
	var limit = 10;
	var isflag = true;
	var total; //总数

	//	消息中心数据对象
	var userMessagesObj = {};
	var first = false;
	var orderlist; //预约列表对象

	mui.init({
		pullRefresh: {
			container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
			up: {
				height: '50px',
				auto: false,
				contentrefresh: '正在加载.....',
				contentmore: '暂无更多数据',
				callback: pullUprefresh
			},
			down: {
				style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
				color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
				height: '50px', //可选,默认50px.下拉刷新控件的高度,
				range: '100px', //可选 默认100px,控件可下拉拖拽的范围
				offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
				auto: false, //可选,默认false.首次加载自动上拉刷新一次
				callback: pullrefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
			}
		}
	});

	var _creator; //登录用户id

	var logininfo = app.getUserInfo();
	_creator = logininfo.id;

	//	消息中心参数
	var userordersobj = {
		'offset': offset,
		'limit': limit,
		'userId': _creator
	}

	mui.plusReady(function() {
		//	刷新界面
		window.addEventListener('refresh', function(e) {
			location.reload();
		})

		var btnArray = ['确认', '取消'];

		//	取消会议
		mui('body').on('tap', '#btnBooking_opts .mui-btn', function(event) {
			var elem = this;
			var li = elem.parentNode.parentNode;
			mui.confirm('是否确认取消会议？', '友情提示', '', function(e) {
				if(e.index == 1) {
					//	执行取消会议操作回调函数
					server.meeting.cancelMeeting(li.getAttribute('data-meetingId'),_creator, function(err) {
						err = err || '';
						if(!err) {
							mui.swipeoutClose(li);
							mui.toast('取消会议失败,请联系管理人员');
							return;
						}
						//	执行取消会议操作
						mui.toast('当前取消已会议');
						mui.swipeoutClose(li);
						elem.parentNode.remove(); //删除当前节点
						li.querySelector('span.mui-badge').innerHTML = "已取消";
						li.querySelector('span.mui-badge').className = "mui-badge mui-badge-danger";
					});
				} else {
					setTimeout(function() {
						mui.swipeoutClose(li);
					}, 0);
				}
			}, 'div');
			event.preventDefault();
		});

	});

	initOrderData();

	function initOrderData() {
		server.meeting.getBookMeeting(userordersobj, function(r) {
			total = r.total;
			if(!first) { //首次加载动态数据，动态渲染DOM
				userMessagesObj = {
					total: r.total,
					items: r.rows
				}
				getDataDom();
				first = true;
			} else { //非首次进入，只更新DOM数据，DOM结构不变
				setTimeout(function() {
					orderlist.items = r.rows; //	重新渲染vue对象DOM时，只需要赋值给初始化VUE对象对应的字段即可
				}, 500)
			}

		}, function(r) {
			mui.toast('服务器错误,请稍后刷新重试');
		});
	}

	function getDataDom() {
		orderlist = new Vue({
			el: "#mui-messagesMsg",
			data: userMessagesObj
		});
	}

	//	添加预约会议
	mui('body').on('tap', 'a#btnBooking', function() {
		mui.openWindow({
			url: 'reservemeeting.html',
			id: 'reservemeeting.html',
			createNew: false, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
			show: {
				autoShow: true, //页面loaded事件发生后自动显示，默认为true
				duration: 300 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
			},
			waiting: {
				autoShow: true //自动显示等待框，默认为true
			}
		})
	})


	//	下拉刷新功能
	function pullrefresh() {
		initOrderData();
		setTimeout(function() {
			mui('#refreshContainer').pullRefresh().endPulldown();
		}, 1000);
	};

	//	上拉分页功能
	function pullUprefresh() {

		if(isflag) { //初始化isflag 为true,有分页
			isflag = total > limit + 10 ? true : false; // 判断总条数 与当前页显示条数+5 
			limit += 10;

			userordersobj.limit = limit;
			initOrderData();

			setTimeout(function() {
				mui('#refreshContainer').pullRefresh().endPullupToRefresh();
			}, 1000);
			pullrefresh();

		} else {
			setTimeout(function() {
				mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
			}, 1000);
		}
	};
</script>